<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编辑排班</title>
    <link rel="stylesheet" href="../../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
        }

        .admin-layout {
            background-color: #f7f7f7;
        }

        .content-wrapper {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 24px;
            margin: 20px;
        }

        .content-header {
            margin-bottom: 24px;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 16px;
        }

        #pageTitle {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }

        /* iOS风格表单 */
        .form-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }

        .required-field::after {
            content: "*";
            color: #dc3545;
            margin-left: 4px;
        }

        .form-control, .form-select {
            height: 44px;
            border-radius: 10px;
            border: 1px solid #e0e0e0;
            padding: 0 16px;
            font-size: 16px;
            transition: all 0.2s ease;
            width: 100%;
            background-color: #f9f9f9;
        }

        .form-control:focus, .form-select:focus {
            border-color: #28a745;
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
            background-color: #fff;
            outline: none;
        }

        /* 按钮样式 */
        .btn {
            height: 44px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;
            padding: 0 20px;
            transition: all 0.2s ease;
        }

        .btn-primary {
            background-color: #28a745;
            border-color: #28a745;
        }

        .btn-primary:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }

        .btn-secondary {
            background-color: #f2f2f7;
            border-color: #f2f2f7;
            color: #28a745;
        }

        .btn-secondary:hover {
            background-color: #e5e5ea;
            border-color: #e5e5ea;
        }

        .btn-action {
            min-width: 120px;
        }

        /* 左侧菜单样式 */
        .submenu {
            display: none;
        }

        .menu-item.active > .submenu {
            display: block;
        }

        .menu-arrow {
            transition: transform 0.2s;
        }

        .menu-item.active > a > .menu-arrow {
            transform: rotate(90deg);
        }

        .submenu li a.active {
            color: #28a745;
            font-weight: bold;
            transform: translateY(2px);
            display: inline-block;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .content-wrapper {
                padding: 16px;
                margin: 10px;
            }

            .form-container {
                padding: 0;
            }
        }


        /* 排班编辑样式 */
        .schedule-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .form-group {
            flex: 1;
            min-width: 200px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .btn-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
        }

        /* 表格样式 */
        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .schedule-table th, .schedule-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        .schedule-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .schedule-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .action-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 5px;
        }

        .edit-btn {
            background-color: #f0ad4e;
            color: white;
        }

        .delete-btn {
            background-color: #d9534f;
            color: white;
        }

        .filter-container {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .filter-item {
            display: flex;
            align-items: center;
        }

        .filter-item label {
            margin-right: 10px;
            font-weight: bold;
        }

        .filter-item select, .filter-item input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-width: 150px;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .checkbox-group input[type="checkbox"] {
            margin-right: 8px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var menuItems = document.querySelectorAll('.menu-item > a');
            menuItems.forEach(function (item) {
                item.addEventListener('click', function (e) {
                    var parent = item.parentElement;
                    // 只允许单开一个折叠区
                    document.querySelectorAll('.menu-item').forEach(function (el) {
                        if (el !== parent) el.classList.remove('active');
                    });
                    parent.classList.toggle('active');
                    e.preventDefault();
                });
            });

            // 添加首页链接的点击事件
            document.querySelector('.menu-item:first-child > a').addEventListener('click', function (e) {
                e.preventDefault(); // 阻止默认行为
                window.location.href = '../homepage/manager_home.html'; // 跳转到管理员首页
            });

            // 默认展开人员管理菜单
            const personMenuItem = document.querySelector('.menu-item:nth-child(2)');
            if (personMenuItem) {
                personMenuItem.classList.add('active');
            }

            // 初始化日期选择器为当前日期
            const today = new Date();
            const formattedDate = formatDate(today);
            document.getElementById('schedule-date').value = formattedDate;

            // 加载初始数据
            loadScheduleData();

            // 绑定筛选事件
            document.getElementById('month-filter').addEventListener('change', loadScheduleData);
            document.getElementById('department-filter').addEventListener('change', loadScheduleData);

            // 绑定表单提交事件
            document.getElementById('schedule-form').addEventListener('submit', handleSubmit);

            // 绑定分页按钮事件
            document.getElementById('prev-page').addEventListener('click', function() {
                if (currentPage > 1) {
                    currentPage--;
                    displayScheduleData();
                    updatePagination();
                }
            });

            document.getElementById('next-page').addEventListener('click', function() {
                const totalPages = Math.ceil(allSchedules.length / itemsPerPage);
                if (currentPage < totalPages) {
                    currentPage++;
                    displayScheduleData();
                    updatePagination();
                }
            });
        });

        // 格式化日期为yyyy-MM-dd格式
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        // 表单提交处理
        async function handleSubmit(event) {
            event.preventDefault();

            // 获取表单数据
            const scheduleId = document.getElementById('schedule-id').value;
            const jobNumber = document.getElementById('job-number').value;
            const department = document.getElementById('employee-department').value;
            const scheduleDate = document.getElementById('schedule-date').value;
            const scheduleTime = document.getElementById('schedule-time').value;
            const isActive = document.getElementById('is-active').checked;

            // 表单验证
            if (!jobNumber || !department || !scheduleDate || !scheduleTime) {
                alert('请填写完整信息');
                return;
            }

            // 构建完整的日期时间字符串
            const scheduleDateTime = `${scheduleDate}T${scheduleTime}:00`;

            // 构建请求数据
            const scheduleData = {
                jobNumber: jobNumber,
                scheduleTime: scheduleDateTime,
                department: department,
                isActive: isActive
            };

            try {
                let url = 'http://localhost:8080/api/schedules';
                let method = 'POST';

                // 如果是编辑现有排班，则使用PUT请求
                if (scheduleId) {
                    url += `/${scheduleId}`;
                    method = 'PUT';
                    scheduleData.id = parseInt(scheduleId);
                }

                const response = await fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(scheduleData)
                });

                if (!response.ok) {
                    throw new Error('保存排班信息失败');
                }

                // 重置表单并刷新数据
                document.getElementById('schedule-form').reset();
                document.getElementById('schedule-id').value = '';
                document.getElementById('is-active').checked = true;

                // 重置日期为当天
                const today = new Date();
                document.getElementById('schedule-date').value = formatDate(today);

                await loadScheduleData();

                alert('排班信息保存成功');
            } catch (error) {
                console.error('保存排班信息出错:', error);
                alert('保存排班信息失败，请稍后重试');
            }
        }

        // 当前页码和每页显示数量
        let currentPage = 1;
        const itemsPerPage = 10;
        let allSchedules = [];

        // 加载排班数据
        async function loadScheduleData() {
            try {
                // 获取当前年份（默认使用2025年）
                const currentYear = 2025;
                const month = document.getElementById('month-filter').value;
                const department = document.getElementById('department-filter').value;

                // 构建API URL
                let url = `http://localhost:8080/api/schedules/month/${currentYear}/${month}`;
                if (department && department !== 'all') {
                    url += `/department/${department}`;
                }

                console.log('请求URL:', url); // 调试用

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('获取排班数据失败');
                }

                // 保存所有数据
                allSchedules = await response.json();

                // 获取每个排班记录对应的员工姓名
                for (let i = 0; i < allSchedules.length; i++) {
                    const schedule = allSchedules[i];
                    try {
                        // 使用工号搜索员工信息
                        const personResponse = await fetch(`http://localhost:8080/api/persons/search?keyword=${schedule.jobNumber}`);
                        if (personResponse.ok) {
                            const persons = await personResponse.json();
                            // 因为使用工号搜索，应该只会返回一个匹配的人员
                            if (persons && persons.length > 0) {
                                allSchedules[i].employeeName = persons[0].name || '未知';
                            } else {
                                allSchedules[i].employeeName = '未知';
                            }
                        }
                    } catch (error) {
                        console.error(`获取员工 ${schedule.jobNumber} 信息失败:`, error);
                        allSchedules[i].employeeName = '未知';
                    }
                }

                // 重置为第一页
                currentPage = 1;

                // 显示分页数据
                displayScheduleData();

                // 更新分页指示器
                updatePagination();

            } catch (error) {
                console.error('加载排班数据出错:', error);
                alert('加载排班数据失败，请稍后重试');
            }
        }

        // 显示当前页的数据
        function displayScheduleData() {
            // 清空表格内容
            const tableBody = document.getElementById('schedule-table-body');
            tableBody.innerHTML = '';

            // 如果没有数据，显示提示信息
            if (allSchedules.length === 0) {
                const noDataRow = document.createElement('tr');
                noDataRow.innerHTML = `<td colspan="6" style="text-align: center; color: #999;">没有找到匹配的排班记录</td>`;
                tableBody.appendChild(noDataRow);
                return;
            }

            // 计算当前页的数据范围
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, allSchedules.length);
            const currentPageData = allSchedules.slice(startIndex, endIndex);

            // 填充表格数据
            currentPageData.forEach(item => {
                const row = document.createElement('tr');

                // 处理日期时间格式
                const scheduleTime = new Date(item.scheduleTime);
                const date = scheduleTime.toISOString().split('T')[0];
                const time = scheduleTime.toTimeString().substring(0, 5);

                const statusText = item.isActive ? '生效中' : '已失效';
                const statusClass = item.isActive ? 'text-success' : 'text-danger';

                row.innerHTML = `
                <td>${item.employeeName || '未知'}</td>
                <td>${item.jobNumber}</td>
                <td>${item.department}</td>
                <td>${date} ${time}</td>
                <td><span class="${statusClass}">${statusText}</span></td>
                <td>
                    <button class="action-btn edit-btn" onclick="editSchedule(${item.id})">编辑</button>
                    <button class="action-btn delete-btn" onclick="deleteSchedule(${item.id})">删除</button>
                </td>
            `;

                tableBody.appendChild(row);
            });
        }

        // 更新分页指示器
        function updatePagination() {
            const totalPages = Math.ceil(allSchedules.length / itemsPerPage);
            document.getElementById('page-indicator').textContent = `第 ${currentPage} 页 / 共 ${totalPages} 页`;

            // 更新按钮状态
            document.getElementById('prev-page').disabled = currentPage <= 1;
            document.getElementById('next-page').disabled = currentPage >= totalPages;
        }

        // 编辑排班
        async function editSchedule(id) {
            try {
                const response = await fetch(`http://localhost:8080/api/schedules/${id}`);
                if (!response.ok) {
                    throw new Error('获取排班信息失败');
                }

                const schedule = await response.json();

                // 处理日期时间格式
                const scheduleTime = new Date(schedule.scheduleTime);
                const date = scheduleTime.toISOString().split('T')[0];
                const time = scheduleTime.toTimeString().substring(0, 5);

                // 填充表单
                document.getElementById('schedule-id').value = schedule.scheduleId;
                document.getElementById('job-number').value = schedule.jobNumber;

                // 尝试获取员工姓名
                try {
                    const personResponse = await fetch(`http://localhost:8080/api/persons/job/${schedule.jobNumber}`);
                    if (personResponse.ok) {
                        const person = await personResponse.json();
                        document.getElementById('employee-name').value = person.name || '';
                    }
                } catch (error) {
                    console.error('获取员工信息失败:', error);
                    document.getElementById('employee-name').value = '';
                }

                document.getElementById('employee-department').value = schedule.department;
                document.getElementById('schedule-date').value = date;
                document.getElementById('schedule-time').value = time;
                document.getElementById('is-active').checked = schedule.isActive;

                // 滚动到表单
                document.getElementById('schedule-form').scrollIntoView({ behavior: 'smooth' });
            } catch (error) {
                console.error('编辑排班出错:', error);
                alert('获取排班信息失败，请稍后重试');
            }
        }

        // 删除排班
        async function deleteSchedule(id) {
            if (confirm('确定要删除此排班记录吗？')) {
                try {
                    const response = await fetch(`http://localhost:8080/api/schedules/${id}`, {
                        method: 'DELETE'
                    });

                    if (!response.ok) {
                        throw new Error('删除排班记录失败');
                    }

                    await loadScheduleData();
                    alert('排班记录已删除');
                } catch (error) {
                    console.error('删除排班出错:', error);
                    alert('删除排班记录失败，请稍后重试');
                }
            }
        }

        // 重置表单，用于添加新排班
        function resetForm() {
            // 清空表单
            document.getElementById('schedule-form').reset();
            document.getElementById('schedule-id').value = '';
            document.getElementById('is-active').checked = true;

            // 重置日期为当天
            const today = new Date();
            document.getElementById('schedule-date').value = formatDate(today);

            // 滚动到表单位置
            document.getElementById('schedule-form').scrollIntoView({ behavior: 'smooth' });
        }

        function logout() {
            // 添加确认提示
            if (confirm('确定要退出登录吗？')) {
                // 清除本地存储的登录信息
                localStorage.removeItem('userInfo');
                localStorage.removeItem('token');

                // 跳转到登录页面
                window.location.href = '../../login.html';
            }
        }

            // 当前年月
            let currentYear = new Date().getFullYear();
            let currentMonth = new Date().getMonth() + 1;
            let selectedDepartment = '';
            let employees = [];

            // 页面加载完成后初始化
            document.addEventListener('DOMContentLoaded', function () {
                // 菜单折叠功能
                var menuItems = document.querySelectorAll('.menu-item > a');
                menuItems.forEach(function (item) {
                    item.addEventListener('click', function (e) {
                        var parent = item.parentElement;
                        // 只允许单开一个折叠区
                        document.querySelectorAll('.menu-item').forEach(function (el) {
                            if (el !== parent) el.classList.remove('active');
                        });
                        parent.classList.toggle('active');
                        e.preventDefault();
                    });
                });
                
                // 默认展开人员管理菜单
                const personMenuItem = document.querySelector('.menu-item:nth-child(2)');
                if (personMenuItem) {
                    personMenuItem.classList.add('active');
                }
                
                // 设置年份和月份选择框为当前年月
                document.getElementById('year-select').value = currentYear;
                document.getElementById('month-select').value = currentMonth;

            // 设置年份和月份选择框为当前年月
            document.getElementById('year-select').value = currentYear;
            document.getElementById('month-select').value = currentMonth;

            // 绑定部门选择事件
            document.getElementById('department-select').addEventListener('change', function() {
            selectedDepartment = this.value;
            if (selectedDepartment) {
            loadEmployeesByDepartment(selectedDepartment);
        } else {
            document.getElementById('employee-list').innerHTML = '';
        }
        });

            // 绑定表单提交事件
            document.getElementById('auto-schedule-form').addEventListener('submit', handleSubmit);
        });

            // 加载指定部门的员工
            async function loadEmployeesByDepartment(department) {
                try {
                    // 使用search接口搜索指定部门的员工
                    const response = await fetch(`http://localhost:8080/api/persons/search?keyword=${department}`);
                    if (!response.ok) {
                        throw new Error('获取员工数据失败');
                    }

                    const employees = await response.json();

                    // 显示员工列表
                    displayEmployees(employees);
                } catch (error) {
                    console.error('加载员工数据出错:', error);
                    showMessage('加载员工数据失败，请稍后重试', false);
                }
            }

            // 显示员工列表
            function displayEmployees(employees) {
            const employeeList = document.getElementById('employee-list');
            employeeList.innerHTML = '';

            if (employees.length === 0) {
            employeeList.innerHTML = '<p>该部门暂无员工</p>';
            return;
        }

            employees.forEach(emp => {
            const item = document.createElement('div');
            item.className = 'employee-item';
            item.innerHTML = `
                    <input type="checkbox" id="emp-${emp.jobNumber}" value="${emp.jobNumber}">
                    <div class="employee-info">
                        <span class="employee-name">${emp.name}</span>
                        <span class="employee-job-number">工号: ${emp.jobNumber}</span>
                        <span class="employee-department">${emp.department}</span>
                    </div>
                `;
            employeeList.appendChild(item);
        });

            // 添加全选/取消全选按钮
            const selectAllContainer = document.createElement('div');
            selectAllContainer.style.marginBottom = '10px';
            selectAllContainer.innerHTML = `
                <button type="button" id="select-all" class="btn btn-secondary">全选</button>
                <button type="button" id="deselect-all" class="btn btn-secondary" style="margin-left: 10px;">取消全选</button>
            `;
            employeeList.insertBefore(selectAllContainer, employeeList.firstChild);

            // 绑定全选/取消全选事件
            document.getElementById('select-all').addEventListener('click', function() {
            const checkboxes = document.querySelectorAll('#employee-list input[type="checkbox"]');
            checkboxes.forEach(cb => cb.checked = true);
        });

            document.getElementById('deselect-all').addEventListener('click', function() {
            const checkboxes = document.querySelectorAll('#employee-list input[type="checkbox"]');
            checkboxes.forEach(cb => cb.checked = false);
        });
        }

            // 处理表单提交
            async function handleSubmit(event) {
            event.preventDefault();

            // 获取表单数据
            const year = parseInt(document.getElementById('year-select').value);
            const month = parseInt(document.getElementById('month-select').value);
            const department = document.getElementById('department-select').value;

            // 获取选中的员工工号
            const selectedEmployees = [];
            const checkboxes = document.querySelectorAll('#employee-list input[type="checkbox"]:checked');
            checkboxes.forEach(cb => {
            selectedEmployees.push(cb.value);
        });

            // 表单验证
            if (!department) {
            showMessage('请选择部门', false);
            return;
        }

            if (selectedEmployees.length === 0) {
            showMessage('请至少选择一名员工', false);
            return;
        }

            try {
            // 发送请求生成排班表
            const response = await fetch(`http://localhost:8080/api/schedules/generate/${year}/${month}/${department}`, {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
        },
            body: JSON.stringify(selectedEmployees)
        });

            const result = await response.json();

            if (response.ok) {
            showMessage(`排班生成成功！${result.message}`, true);
        } else {
            showMessage(`排班生成失败：${result.message}`, false);
        }
        } catch (error) {
            console.error('生成排班出错:', error);
            showMessage('生成排班失败，请稍后重试', false);
        }
        }

            // 显示消息
            function showMessage(message, isSuccess) {
            const messageElement = document.getElementById('result-message');
            messageElement.textContent = message;
            messageElement.style.display = 'block';

            // 设置消息样式
            if (isSuccess) {
            messageElement.className = 'result-message success-message';
        } else {
            messageElement.className = 'result-message error-message';
        }

            // 5秒后自动隐藏
            setTimeout(() => {
            messageElement.style.display = 'none';
        }, 5000);
        }

            function logout() {
            // 添加确认提示
            if (confirm('确定要退出登录吗？')) {
            // 清除本地存储的登录信息
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');

            // 跳转到登录页面
            window.location.href = '../../login.html';
        }
        }

    </script>
</head>
<body>
<div class="admin-layout">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
        <div class="header-left">
            <div class="logo">生产过程管理系统</div>
        </div>
        <div class="header-right">
            <span class="user-info">部门经理</span>
            <span class="user-name">
                    <script>
                        try {
                            const userInfo = localStorage.getItem('userInfo');
                            const user = JSON.parse(userInfo);
                            document.write(user.name || '未登录');
                        } catch (e) {
                            document.write('未登录');
                        }
                    </script>
                </span>
            <button class="logout-btn" onclick="logout()">退出</button>
        </div>
    </header>
    <!-- 左侧菜单 -->
    <aside class="admin-sidebar">
        <ul class="menu-list">
            <li class="menu-item">
                <a href="../homepage/manager_home.html">
                    <span class="menu-icon">🏠</span>
                    <span class="menu-title">首页</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="javascript:void(0)">
                    <span class="menu-icon">👥</span>
                    <span class="menu-title">人员管理</span>
                    <span class="menu-arrow"></span>
                </a>
                <ul class="submenu">
                    <li><a href="../person/person_list.html">人员列表</a></li>
                    <li><a href="../person/person_edit.html">添加人员</a></li>
                    <li><a href="../person/schedule_edit.html" class="active">编辑排班表</a></li>
                    <li><a href="../person/schedule.html">查看排班表</a></li>
                    <li><a href="../person/schedule_statistics.html">班次统计</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="javascript:void(0)">
                    <span class="menu-icon">📦</span>
                    <span class="menu-title">物料管理</span>
                    <span class="menu-arrow"></span>
                </a>
                <ul class="submenu">
                    <li><a href="../material/material_list.html">物料列表</a></li>
                    <li><a href="*">物料采购统计</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="javascript:void(0)">
                    <span class="menu-icon">⚙️</span>
                    <span class="menu-title">设备管理</span>
                    <span class="menu-arrow"></span>
                </a>
                <ul class="submenu">
                    <li><a href="../device/device_list.html">设备列表</a></li>
                    <li><a href="*">设备报修报废统计</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="javascript:void(0)">
                    <span class="menu-icon">📝</span>
                    <span class="menu-title">产品管理</span>
                    <span class="menu-arrow"></span>
                </a>
                <ul class="submenu">
                    <li><a href="../product/product_list.html">产品列表</a></li>
                    <li><a href="../product/editproduct_plan.html">编辑生产计划</a></li>
                    <li><a href="../product/viewproduct_plan.html">查看生产计划</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="javascript:void(0)">
                    <span class="menu-icon">🏢</span>
                    <span class="menu-title">供应商管理</span>
                    <span class="menu-arrow"></span>
                </a>
                <ul class="submenu">
                    <li><a href="../provider/provider_list.html">供应商列表</a></li>
                </ul>
            </li>
        </ul>
    </aside>

    <!-- 主内容区域 -->
    <main class="admin-main">
        <h1>编辑排班</h1>

        <!-- 排班表单 -->
        <form id="schedule-form" class="schedule-form">
            <input type="hidden" id="schedule-id">
            <div class="form-row">
                <div class="form-group">
                    <label for="job-number">工号</label>
                    <input type="text" id="job-number" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="employee-department">部门</label>
                    <select id="employee-department" class="form-control" required>
                        <option value="">请选择部门</option>
                        <option value="表面处理车间">表面处理车间</option>
                        <option value="锻压车间">锻压车间</option>
                        <option value="组装车间">组装车间</option>
                        <option value="质检车间">质检车间</option>
                        <option value="机加车间">机加车间</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="schedule-date">排班日期</label>
                    <input type="date" id="schedule-date" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="schedule-time">排班时间</label>
                    <input type="time" id="schedule-time" class="form-control" required>
                </div>
                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="is-active" checked>
                        <label for="is-active">是否生效</label>
                    </div>
                </div>
            </div>
            <div class="btn-container">
                <button type="button" class="btn btn-secondary" onclick="resetForm()">取消</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </form>

        <h1>自动排班</h1>

        <!-- 自动排班表单 -->
        <form id="auto-schedule-form" class="auto-schedule-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="year-select">年份:</label>
                    <select id="year-select" class="form-control">
                        <option value="2023">2023年</option>
                        <option value="2024">2024年</option>
                        <option value="2025">2025年</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="month-select">月份:</label>
                    <select id="month-select" class="form-control">
                        <option value="1">1月</option>
                        <option value="2">2月</option>
                        <option value="3">3月</option>
                        <option value="4">4月</option>
                        <option value="5">5月</option>
                        <option value="6">6月</option>
                        <option value="7">7月</option>
                        <option value="8">8月</option>
                        <option value="9">9月</option>
                        <option value="10">10月</option>
                        <option value="11">11月</option>
                        <option value="12">12月</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="department-select">部门:</label>
                    <select id="department-select" class="form-control">
                        <option value="">请选择部门</option>
                        <option value="表面处理车间">表面处理车间</option>
                        <option value="锻压车间">锻压车间</option>
                        <option value="组装车间">组装车间</option>
                        <option value="质检车间">质检车间</option>
                        <option value="机加车间">机加车间</option>
                    </select>
                </div>
            </div>

            <!-- 员工选择区域 -->
            <div class="employee-selection">
                <h3>选择员工</h3>
                <div id="employee-list" class="employee-list">
                    <!-- 员工列表将通过JavaScript动态生成 -->
                    <p>请先选择部门</p>
                </div>
            </div>

            <div class="btn-container">
                <button type="submit" class="btn btn-primary">生成排班表</button>
            </div>
        </form>

        <!-- 结果消息 -->
        <div id="result-message" class="result-message"></div>

        <!-- 排班列表 -->
        <div>
            <h2>排班记录</h2>

            <!-- 筛选条件 -->
            <div class="filter-container">
                <div class="filter-item">
                    <label for="month-filter">月份:</label>
                    <select id="month-filter">
                        <option value="1">1月</option>
                        <option value="2">2月</option>
                        <option value="3">3月</option>
                        <option value="4">4月</option>
                        <option value="5">5月</option>
                        <option value="6" selected>6月</option>
                        <option value="7">7月</option>
                        <option value="8">8月</option>
                        <option value="9">9月</option>
                        <option value="10">10月</option>
                        <option value="11">11月</option>
                        <option value="12">12月</option>
                    </select>
                </div>

                <div class="filter-item">
                    <label for="department-filter">部门:</label>
                    <select id="department-filter">
                        <option value="all">全部部门</option>
                        <option value="表面处理车间">表面处理车间</option>
                        <option value="锻压车间">锻压车间</option>
                        <option value="组装车间">组装车间</option>
                        <option value="质检车间">质检车间</option>
                        <option value="机加车间">机加车间</option>
                    </select>
                </div>
            </div>

            <!-- 排班表格 -->
            <table class="schedule-table">
                <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>工号</th>
                    <th>部门</th>
                    <th>排班时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="schedule-table-body">
                <!-- 排班数据将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
        <!-- 分页控件 -->
        <div class="pagination-container">
            <button id="prev-page" class="btn btn-secondary">上一页</button>
            <span id="page-indicator"></span>
            <button id="next-page" class="btn btn-secondary">下一页</button>
        </div>

        <style>
            .pagination-container {
                margin-top: 20px;
                display: flex;
                gap: 10px;
                align-items: center;
            }
        </style>
    </main>
</div>
</body>
</html>